<template>
	<div class="business-user">
		<!-- left -->
		<div class="fl">
			<ShopListMenu :has-select-all-button="true" :has-headquarters="true" title="组织架构"
				@emitShopId="emitShopId" />
		</div>

		<!-- right -->
		<div class="right app-main-content-box">
			<transition name="el-fade-in-linear">
				<user-list v-if="tabName === 'user' && moduleType === 'list'" ref="userList" :shop-id="Number(shopId)"
					:shop-name="shopName" :cur-select-label="curSelectLabel" @changeShowType="changeShowType" />
			</transition>
			<transition name="el-fade-in">
				<user-approve v-if="moduleType === 'approve'" ref="userApprove" :shop-id="shopId" :shop-name="shopName"
					:cur-select-label="curSelectLabel" @changeShowType="changeShowType" />
			</transition>
		</div>
	</div>
</template>

<script>
	import store from '@/store';
	import UserList from './components/UserList';
	import UserApprove from './components/UserApprove';
	import {
		mapActions
	} from 'vuex';
	export default {
		components: {
			UserList,
			UserApprove
		},
		props: {
			business: {},
			tabName: {
				type: String,
				require: true
			}
		},
		data() {
			return {
				// 配置
				moduleType: 'list', // 当前显示默认list  approve
				// 数据
				shopId: null,
				shopName: '',
				curSelectLabel: ''
			};
		},
		watch: {
			tabName(val) {
				if (val === 'user') {
					this.moduleType = 'list';
				}
			}
		},
		created() {
			this.defaultShopId()
		},
		mounted() {
			this.getActiveMaIsOnline();
		},
		methods: {
			/**
			 * 获取数据
			 */
			// 获取小程序是否上线
			...mapActions(['getAuthMa']),
			getActiveMaIsOnline() {
				this.getAuthMa();
			},

			// 其他页面跳转过来，选中的门店
			defaultShopId() {				
				let {
					shopId,
					shopName
				} = this.$route.params
				this.shopId = shopId;
				this.shopName = shopName;
				this.curSelectLabel = shopId !== -1 ? shopName : '全部员工';
				store.dispatch('SetShopListMenuActiveShop', {
					shopId: this.shopId,
					shopName: this.shopName
				})
			},

			/**
			 * 按钮组
			 */
			// 选择门店
			emitShopId(item) {
				this.shopId = item.shopId;
				this.shopName = item.shopName;
				this.curSelectLabel = item.shopId !== -1 ? item.shopName : '全部员工';
			},

			// 切换表格显示
			changeShowType() {
				this.moduleType = this.moduleType === 'list' ? 'approve' : 'list';
			}
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	/* 左侧组织 */
	.left {
		float: left;
		margin-right: 10px;
		padding: 24px 30px 24px 15px;
		border-radius: 5px;
		background-color: #fff;

		.title {
			margin-bottom: 24px;
			padding-left: 15px;
			font-size: 20px;
			font-weight: bold;
		}
	}

	/* 右侧表格 */
	.right {
		overflow: hidden;
	}
</style>
